<template>
    <div id="sy">
        <div class="warpe">
            <div class="banner">
                <div class="swipe">
                    <ul id="slider">
                        <li>
                            <a href="#"><img src="../../assets/img/banner.jpg" alt="" /></a>
                        </li>
                        <li>
                            <a href="#"><img src="../../assets/img/banner.jpg" alt="" /></a>
                        </li>
                        <li>
                            <a href="#"><img src="../../assets/img/banner.jpg" alt="" /></a>
                        </li>
                        <li>
                            <a href="#"><img src="../../assets/img/banner.jpg" alt="" /></a>
                        </li>
                        <li>
                            <a href="#"><img src="../../assets/img/banner.jpg" alt="" /></a>
                        </li>
                    </ul>
                    <div id="pagenavi">
                        <a href="javascript:void(0);" class="active"></a>
                        <a href="javascript:void(0);" class=""></a>
                        <a href="javascript:void(0);" class=""></a>
                        <a href="javascript:void(0);" class=""></a>
                        <a href="javascript:void(0);" class=""></a>
                    </div>
                </div>
                <div class="title_name"><a href="my_home9.html"> 保利罗兰 <i class=" icon-angle-down"></i> </a></div>
                <div class="mess_iocn animated rotateIn">
                    <router-link :to="testLink">
                        <i class="icon-credit-card puff_left"></i>
                        <span></span>
                    </router-link>
                </div>
                <div class="mess_iocn mess_iocn2 animated rotateIn">
                    <router-link :to="msgLink">
                        <i class="icon-user puff_left"></i>
                        <span></span>
                    </router-link>
                </div>
            </div>
            <div class="title">
                <span class="puff_left"><i class="icon-volume-down color_y"></i> 预警信息 安防报警信息</span>
                <span class="puff_right">18:30</span>
            </div>
            <div class="id_nav">
                <div class="id_nav_l puff_left">
                    <a href="#">
                        <p>紧急呼叫</p>
                        <span><img src="../../assets/img/icon_sos.png" class="animated rotateIn"></span>
                    </a>
                </div>
                <div class="id_nav_r puff_left">
                    <div class="id_nav_rt">
                        <a href="#">
                            <p>服务呼叫</p>
                            <span class="animated fadeInLeft">一键获取更多服务</span>
                            <img src="../../assets/img/icon_phone.png" class="animated rotateIn">
                        </a>
                    </div>
                    <div class="id_nav_rt clear_border">
                        <a href="#">
                            <p style="color: #f2a218;">芝麻开门</p>
                            <span class="animated fadeInLeft">免门禁卡通行小区</span>
                            <img src="../../assets/img/icon_zmkm.png" class="animated rotateIn">
                        </a>
                    </div>
                </div>
            </div>
            <div class="nav">
                <ul>
                    <li>
                        <a href="#">
                            <p><img src="../../assets/img/icon_fk.png" class="animated bounceIn"></p>
                            <span>访客管理</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <p><img src="../../assets/img/icon_et.png" class="animated rotateIn"></p>
                            <span>儿童安全</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <p><img src="../../assets/img/icon_jk.png" class="animated bounceIn"></p>
                            <span>健康服务</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <p><img src="../../assets/img/icon_zn.png" class="animated rotateIn"></p>
                            <span>智能监控</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <p><img src="../../assets/img/icon_wifi.png" class="animated bounceIn"></p>
                            <span>免费wifi</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <p><img src="../../assets/img/icon_cy.png" class="animated rotateIn"></p>
                            <span>餐饮外卖</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <p><img src="../../assets/img/icon_jz.png" class="animated bounceIn"></p>
                            <span>家政服务</span>
                        </a>
                    </li>
                    <li>
                        <a href="community.html">
                            <p><img src="../../assets/img/icon_sq.png" class="animated rotateIn"></p>
                            <span>社区互动</span>
                        </a>
                    </li>
                </ul>
            </div>
            <div class="center">
                <div class="pictitle">
                    <span class="picbg"></span>
                    <span>社区商圈</span>
                    <a href="#" class="puff_right">更多 ></a>
                </div>
                <div class="bannerside">
                    <a href="#"><img src="../../assets/img/pic1.jpg"></a>
                </div>
                <div class="bannerside">
                    <a href="#"><img src="../../assets/img/pic2.jpg"></a>
                </div>
                <div class="bannerside">
                    <a href="#"><img src="../../assets/img/pic3.jpg"></a>
                </div>
                <div class="id_bth">
                    <a href="#">进入社区大家庭</a>
                </div>
            </div>
        </div>
        <div class="navside">
            <ul>
                <li class="margin_left animated bounceInLeft">
                    <router-link :to="homeLink" class="navside_hover">
                        <p><i class="icon-home"></i></p>
                        <span>首页</span>
                    </router-link>
                </li>
                <li class="animated bounceInRight">
                    <router-link :to="znzxLink">
                        <p><i class="icon-globe"></i></p>
                        <span>智能中心</span>
                    </router-link>
                </li>
                <li class="animated bounceInLeft">
                    <router-link :to="fwzxLink">
                        <p><i class="icon-star-empty"></i></p>
                        <span>服务中心</span>
                    </router-link>
                </li>
                <li class="animated bounceInRight">
                    <router-link :to="sqhdLink">
                        <p><i class="icon-columns"></i></p>
                        <span>社区互动</span>
                    </router-link>
                </li>
                <li class="animated bounceInLeft">
                    <router-link :to="xxzxLink">
                        <p><i class="  icon-th-large"></i></p>
                        <span>信息中心</span>
                    </router-link>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
    export default {
        props: {

        },
        data(){
            return {
                title: '首页',
                msgLink:'/msg',
                testLink:'/test',
                homeLink: '/home',
                znzxLink: '/znzx',
                fwzxLink: '/fwzx',
                sqhdLink: '/sqhd',
                xxzxLink: '/xxzx',
            }
        },
        methods: {
            changeTitle: function () {
            }
        }
    }
</script>


<style scoped>

</style>
